<template>
  <view class="product-con">
    <!-- <view class="navbar" :style="{ height: navH + 'rpx', opacity: opacity }">
      <view class="navbarH" :style="'height:' + navH + 'rpx;'">
        <view
          class="navbarCon acea-row row-center-wrapper"
          :style="{ paddingRight: navbarRight + 'px' }"
        >
          <view class="header acea-row row-center-wrapper">
            <view
              class="item"
              :class="navActive === index ? 'on' : ''"
              v-for="(item, index) in navList"
              :key="index"
              @tap="tap(index)"
            >
              {{ item }}
            </view>
          </view>
        </view>
      </view>
    </view> -->
    <!-- <view
      id="home"
      class="home acea-row row-center-wrapper iconfont icon-xiangzuo"
      :class="opacity > 0.5 ? 'on' : ''"
      :style="{ top: homeTop + 'rpx' }"
      v-if="returnShow"
      @tap="returns"
    >
    </view> -->
  
    <view>
      <scroll-view
        :scroll-top="scrollTop"
        scroll-y="true"
        scroll-with-animation="true"
        :style="'height:' + height + 'px;'"
        @scroll="scroll"
      >
        <view id="past0">
          <productConSwiper
            :imgUrls="sliderImage"
            :videoline="productInfo.videoLink"
            :indicatorDots="false"
            :userIndicatorDots="true"
          >
          </productConSwiper>
          <view class="">
            <view class="wrapper">
              <view class="introduce">{{ productInfo.storeName }}</view>
            </view>
         
          </view>
        </view>
        <view class="product-intro" id="past3">
          
          <view class="conter">
            <jyf-parser
              :html="description"
              ref="article"
              :tag-style="tagStyle"
            ></jyf-parser>
            

          </view>
        </view>
        <view style="height: 120rpx"></view>
      </scroll-view>
    </view>
    <view class="footer acea-row row-between-wrapper">
     
      <block v-if="type === 'normal'">
       
        <!-- <view @click="setCollect" class="item">
          <view class="back-list-text">返回列表</view>
        </view> -->
        <view class="bnt acea-row" v-if="attr.productSelect.stock <= 0">
          
          <form report-submit="true">
            <button class="buy bnts bg-color-hui" form-type="submit">
              已售罄
            </button>
          </form>
        </view>
        <view class="bnt acea-row" v-else>
    
          <form @submit="goBuy" report-submit="true">
            <button class="buy bnts" form-type="submit" v-if="!isOpen">立即兑换</button>
            <button class="buy bnts" form-type="submit" v-if="isOpen">确认兑换</button>
          </form>
        </view>
      </block>
      
    </view>
    
    <!-- 组件 -->
    <productWindow
      :attr="attr"
     
   
      :isShowAddNumber="false"
      :isShowPrice="false"
     :isShowInventory="false"
      @myevent="onMyEvent"
      @ChangeAttr="ChangeAttr"
      @ChangeCartNum="ChangeCartNum"
      @attrVal="attrVal"
      @iptCartNum="iptCartNum"
      id="product-window"
    >
    </productWindow>
    
  </view>
</template>

<script>
import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js'
 
 
import {
  getProductDetail,
 
  getReplyConfig,
 
  getReplyProduct,
} from '@/api/store.js'
import { spread } from '@/api/user'
 
 
import { toLogin } from '@/libs/login.js'
import { computeUser } from '@/api/user.js'
import { mapGetters } from 'vuex'
import { imageBase64 } from '@/api/public'
import productConSwiper from '@/components/productConSwiper'
 
import productWindow from '@/components/productWindow'
import userEvaluation from '@/components/userEvaluation'
import shareRedPackets from '@/components/shareRedPackets'
import home from '@/components/home'
 
import parser from '@/components/jyf-parser/jyf-parser'
 
let app = getApp()
export default {
  components: {
    productConSwiper,
   
    productWindow,
    userEvaluation,
    shareRedPackets,
    home,
    'jyf-parser': parser,
   
  },
  data() {
    let that = this
    return {
      //属性是否打开
      coupon: {
        coupon: false,
        type: 1,
        list: [],
        count: [],
      },
      attrTxt: '请选择', //属性页面提示
      attrValue: '', //已选属性
      animated: false, //购物车动画
      id: 0, //商品id
      replyCount: 0, //总评论数量
      reply: [], //评论列表
      productInfo: {}, //商品详情
      productValue: [], //系统属性
      couponList: [], //优惠券
      cart_num: 1, //购买数量
      isAuto: false, //没有授权的不会自动授权
      isShowAuth: false, //是否隐藏授权
      isOpen: false, //是否打开属性组件
      actionSheetHidden: true,
      storeImage: '', //海报产品图
      PromotionCode: '', //二维码图片
      posterbackgd: 'https://cshy.store/file/sysFile/wechart/posterbackgd.png',
      sharePacket: {
        isState: true, //默认不显示
      }, //分销商详细
      // uid: 0, //用户uid
      circular: false,
      autoplay: false,
      interval: 3000,
      duration: 500,
      clientHeight: '',
      systemStore: {}, //门店信息
      good_list: [],
      replyChance: 0,
      CartCount: 0,
      isDown: true,
      posters: false,
      weixinStatus: false,
      attr: {
        cartAttr: false,
        productAttr: [],
        productSelect: {},
      },
      description: '',
      navActive: 0,
      H5ShareBox: false, //公众号分享图片
      activityH5: [],
      retunTop: true, //顶部返回
      navH: '',
      navList: [],
      opacity: 0,
      scrollY: 0,
      topArr: [],
      toView: '',
      height: 0,
      heightArr: [],
      lock: false,
      scrollTop: 0,
      tagStyle: {
        img: 'width:100%;display:block;',
        table: 'width:100%',
        video: 'width:100%',
      },
      sliderImage: [],
      qrcodeSize: 600,
      canvasStatus: false, //是否显示海报
      imagePath: '', //海报路径
      imgTop: '',
      errT: '',
      homeTop: 20,
      navbarRight: 0,
      userCollect: false,
      returnShow: true, //判断顶部返回是否出现
      type: '', //视频号普通商品类型
      pickupCode:''
    }
  },
  computed: mapGetters(['isLogin', 'uid', 'chatUrl']),
  watch: {
    isLogin: {
      handler: function (newV, oldV) {
        let that = this
        if (newV == true) {
       
          
        }
      },
      deep: true,
    },
    productInfo: {
      handler: function () {
        this.$nextTick(() => {})
      },
      immediate: true,
    },
  },
  onLoad(options) {
    let that = this
    var pages = getCurrentPages()
    that.returnShow = pages.length === 1 ? false : true
    if (pages.length <= 1) {
      that.retunTop = false
    }
    that.navH = app.globalData.navHeight
    // #ifdef H5
    computeUser()
    // #endif
  
    uni.getSystemInfo({
      success: function (res) {
        that.height = res.windowHeight
      },
    })
    if (!options.scene && !options.id) {
      this.showSkeleton = false
      this.$util.Tips(
        {
          title: '缺少参数无法查看商品',
        },
        {
          url: '/pages/index/index',
        }
      )
      return
    }
    this.pickupCode=options.pickupCode
    if (options.hasOwnProperty('id') || options.scene) {
      if (options.scene) {
        // 仅仅小程序扫码进入
        let qrCodeValue = that.$util.getUrlParams(
          decodeURIComponent(options.scene)
        )
        let mapeMpQrCodeValue = that.$util.formatMpQrCodeData(qrCodeValue)
        app.globalData.spread = mapeMpQrCodeValue.spread
        this.id = mapeMpQrCodeValue.id
        setTimeout(() => {
          spread(mapeMpQrCodeValue.spread)
            .then((res) => {})
            .catch((res) => {})
        }, 2000)
      } else {
        this.id = options.id
      }
      options.type == undefined || options.type == null
        ? (that.type = 'normal')
        : (that.type = options.type)
      that.$store.commit('PRODUCT_TYPE', that.type)
    }
    this.getGoodsDetails()
    
  },
  onReady() {
    
  },
  show() {},
 
  methods: {
     
   
  
    // 后退
    returns: function () {
      uni.navigateBack()
    },
     
     
    
    // 微信登录回调
    onLoadFun: function (e) {
   
       
    },
    ChangCouponsClone: function () {
      this.$set(this.coupon, 'coupon', false)
    },
    
    attrVal(val) {
      this.$set(
        this.attr.productAttr[val.indexw],
        'index',
        this.attr.productAttr[val.indexw].attrValues[val.indexn]
      )
    },
    /**
     * 属性变动赋值
     *
     */
    ChangeAttr: function (res) {
      let productSelect = this.productValue[res]
      if (productSelect) {
        this.$set(this.attr.productSelect, 'image', productSelect.image)
        this.$set(this.attr.productSelect, 'price', productSelect.price)
        this.$set(this.attr.productSelect, 'stock', productSelect.stock)
        this.$set(this.attr.productSelect, 'unique', productSelect.id)
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', res)
        this.$set(this, 'attrTxt', '已选择')
      } else {
        this.$set(this.attr.productSelect, 'image', this.productInfo.image)
        this.$set(this.attr.productSelect, 'price', this.productInfo.price)
        this.$set(this.attr.productSelect, 'stock', 0)
        this.$set(this.attr.productSelect, 'unique', this.productInfo.id)
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', '')
        this.$set(this, 'attrTxt', '请选择')
      }
    },
    
     
    /**
     * 获取产品详情
     *
     */
    getGoodsDetails: function () {
      let that = this
      getProductDetail(that.id, that.type,1)
        .then((res) => {
          let productInfo = res.data.productInfo
          // 字符串数组转数组；
          let arrayImg = productInfo.sliderImage
          let sliderImage = JSON.parse(arrayImg)
          that.$set(that, 'sliderImage', sliderImage)
          that.$set(that, 'productInfo', productInfo)
          that.$set(that, 'description', productInfo.content)
          that.$set(that, 'userCollect', res.data.userCollect)
          that.$set(that.attr, 'productAttr', res.data.productAttr)
          that.$set(that, 'productValue', res.data.productValue)
          that.$set(that.sharePacket, 'priceName', res.data.priceName)
          that.$set(
            that.sharePacket,
            'isState',
            Math.floor(res.data.priceName) != 0 ? false : true
          )
          that.$set(
            that,
            'activityH5',
            res.data.activityAllH5 ? res.data.activityAllH5 : []
          )
          uni.setNavigationBarTitle({
            title: productInfo.storeName.substring(0, 7) + '...',
          })
          let productAttr = this.attr.productAttr.map((item) => {
            return {
              attrName: item.attrName,
              attrValues: item.attrValues.split(','),
              id: item.id,
              isDel: item.isDel,
              productId: item.productId,
              type: item.type,
            }
          })
          this.$set(this.attr, 'productAttr', productAttr)
          if (that.isLogin) {
         
            //#ifdef H5
            that.make(that.uid)
            that.ShareInfo()
            this.getImageBase64(this.productInfo.image)
            // #endif
            // #ifdef MP
            that.getQrcode()
            // #endif
          }
          setTimeout(function () {
            that.infoScroll()
          }, 500)
         
          // #ifndef H5
          that.downloadFilestoreImage()
          // #endif
          that.DefaultSelect()
        })
        .catch((err) => {
          //状态异常返回上级页面
          return that.$util.Tips(
            {
              title: err.toString(),
            },
            {
              tab: 3,
              url: 1,
            }
          )
        })
    },
    getProductReplyList: function () {
      getReplyProduct(this.id).then((res) => {
        this.reply = res.data.productReply ? [res.data.productReply] : []
      })
    },
    getProductReplyCount: function () {
      let that = this
      getReplyConfig(that.id).then((res) => {
        that.$set(that, 'replyChance', res.data.replyChance * 100)
        that.$set(that, 'replyCount', res.data.sumCount)
      })
    },
    infoScroll: function () {
      var that = this,
        topArr = [],
        heightArr = []
      for (var i = 0; i < that.navList.length; i++) {
        //productList
        //获取元素所在位置
        var query = uni.createSelectorQuery().in(this)
        var idView = '#past' + i
        // if (!that.data.good_list.length && i == 2) {
        //   var idView = "#past" + 3;
        // }
        query.select(idView).boundingClientRect()
        query.exec(function (res) {
          var top = res[0].top
          var height = res[0].height
          topArr.push(top)
          heightArr.push(height)
          that.$set(that, 'topArr', topArr)
          that.$set(that, 'heightArr', heightArr)
        })
      }
    },
   
    /**
     * 打开地图
     *
     */
    showMaoLocation: function () {
      if (!this.systemStore.latitude || !this.systemStore.longitude)
        return this.$util.Tips({
          title: '缺少经纬度信息无法查看地图！',
        })
      uni.openLocation({
        latitude: parseFloat(this.systemStore.latitude),
        longitude: parseFloat(this.systemStore.longitude),
        scale: 8,
        name: this.systemStore.name,
        address: this.systemStore.address + this.systemStore.detailed_address,
        success: function () {},
      })
    },
    /**
     * 默认选中属性
     *
     */
    DefaultSelect: function () {
      let productAttr = this.attr.productAttr
      let value = []
      for (let key in this.productValue) {
        if (this.productValue[key].stock > 0) {
          value = this.attr.productAttr.length ? key.split(',') : []
          break
        }
      }
      for (let i = 0; i < productAttr.length; i++) {
        this.$set(productAttr[i], 'index', value[i])
      }
      //sort();排序函数:数字-英文-汉字；
      let productSelect = this.productValue[value.join(',')]
      if (productSelect && productAttr.length) {
        this.$set(
          this.attr.productSelect,
          'storeName',
          this.productInfo.storeName
        )
        this.$set(this.attr.productSelect, 'image', productSelect.image)
        this.$set(this.attr.productSelect, 'price', productSelect.price)
        this.$set(this.attr.productSelect, 'stock', productSelect.stock)
        this.$set(this.attr.productSelect, 'unique', productSelect.id)
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', value.join(','))
        this.$set(this, 'attrTxt', '已选择')
      } else if (!productSelect && productAttr.length) {
        this.$set(
          this.attr.productSelect,
          'storeName',
          this.productInfo.storeName
        )
        this.$set(this.attr.productSelect, 'image', this.productInfo.image)
        this.$set(this.attr.productSelect, 'price', this.productInfo.price)
        this.$set(this.attr.productSelect, 'stock', 0)
        this.$set(this.attr.productSelect, 'unique', this.productInfo.id)
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', '')
        this.$set(this, 'attrTxt', '请选择')
      } else if (!productSelect && !productAttr.length) {
        this.$set(
          this.attr.productSelect,
          'storeName',
          this.productInfo.storeName
        )
        this.$set(this.attr.productSelect, 'image', this.productInfo.image)
        this.$set(this.attr.productSelect, 'price', this.productInfo.price)
        this.$set(this.attr.productSelect, 'stock', this.productInfo.stock)
        this.$set(this.attr.productSelect, 'unique', this.productInfo.id || '')
        this.$set(this.attr.productSelect, 'cart_num', 1)
        this.$set(this, 'attrValue', '')
        this.$set(this, 'attrTxt', '请选择')
      }
    },
 
   

    ChangCouponsUseState(index) {
      let that = this
      that.coupon.list[index].isUse = true
      that.$set(that.coupon, 'list', that.coupon.list)
      that.$set(that.coupon, 'coupon', false)
    },
   
    /**
     * 打开属性插件
     */
    selecAttr: function () {
      this.$set(this.attr, 'cartAttr', true)
      this.$set(this, 'isOpen', true)
    },
 
    onMyEvent: function () {
    
      this.$set(this.attr, 'cartAttr', false)
      this.$set(this, 'isOpen', false)
    },
    
    /*
     * 加入购物车
     */
    goCat: function (num) {
      let that = this,
        productSelect = that.productValue[this.attrValue]
      //打开属性
     
      if (that.attrValue) {
        //默认选中了属性，但是没有打开过属性弹窗还是自动打开让用户查看默认选中的属性
        that.attr.cartAttr = !that.isOpen ? true : false
      } 
      // else {
      //   if (that.isOpen) that.attr.cartAttr = true
      //   else that.attr.cartAttr = !that.attr.cartAttr
      // }
      //只有关闭属性弹窗时进行加入购物车
      if (that.attr.cartAttr === true && that.isOpen === false)
        return (that.isOpen = true)
      //如果有属性,没有选择,提示用户选择
      if (
        that.attr.productAttr.length &&
        productSelect.stock === 0 &&
        that.isOpen === true
      )
        return that.$util.Tips({
          title: '产品库存不足，请选择其它',
        })
     
        this.getPreOrder()
    
    },
   
    /**
     * 立即购买
     */
    goBuy: function (e) {
      if (this.isLogin === false) {
        toLogin(`/pages/users/login/gift_index?id=${this.id}&pickupCode=${this.pickupCode}`)

      } else {
        this.goCat(0)
      }
    },
    /**
     * 预下单
     */
    getPreOrder: function () {
      this.isOpen=false
      this.$Order.getPreOrderGift(this.type === 'normal' ? 'buyNow' : 'video', [
        {
          attrValueId: parseFloat(this.attr.productSelect.unique),
          productId: parseFloat(this.id),
          productNum: parseFloat(this.attr.productSelect.cart_num),
        },
       
      ], this.pickupCode)
    },
    // 授权关闭
    authColse: function (e) {
      this.isShowAuth = e
    },
    /**
     * 分享打开
     *
     */
    listenerActionSheet: function () {
      if (this.isLogin === false) {
        toLogin()
      } else {
        // #ifdef H5
        if (this.$wechat.isWeixin() === true) {
          this.weixinStatus = true
        }
        // #endif
        this.posters = true
      }
    },
    closePosters: function () {
      this.posters = false
    },
    //隐藏海报
    posterImageClose: function () {
      this.canvasStatus = false
    },
    //替换安全域名
    setDomain: function (url) {
      url = url ? url.toString() : ''
      //本地调试打开,生产请注销
      if (url.indexOf('https://') > -1) return url
      else return url.replace('http://', 'https://')
    },
    //获取海报产品图（解决跨域问题，只适用于小程序）
    downloadFilestoreImage: function () {
      let that = this
      uni.downloadFile({
        url: that.setDomain(that.productInfo.image),
        success: function (res) {
          that.storeImage = res.tempFilePath
        },
        fail: function () {
          return that.$util.Tips({
            title: '',
          })
          that.storeImage = ''
        },
      })
    },
    // 小程序关闭分享弹窗；
    goFriend: function () {
      this.posters = false
    },
    // 小程序二维码
    getQrcode() {
      let that = this
      let data = {
        pid: that.uid,
        id: that.id,
        path: 'pages/goods/goods_details/index',
      }
      getQrcode(data)
        .then((res) => {
          base64src(res.data.code, (res) => {
            that.PromotionCode = res
          })
        })
        .catch((err) => {
          that.errT = err
        })
    },
    // 生成二维码；
    make(uid) {
      let href =
        location.href.split('?')[0] + '?id=' + this.id + '&spread=' + this.uid
      uQRCode.make({
        canvasId: 'qrcode',
        text: href,
        size: this.qrcodeSize,
        margin: 10,
        success: (res) => {
          this.PromotionCode = res
        },
        complete: () => {},
        fail: (res) => {
          this.$util.Tips({
            title: '海报二维码生成失败！',
          })
        },
      })
    },
    getImageBase64: function (images) {
      let that = this
      imageBase64({
        url: images,
      }).then((res) => {
        that.imgTop = res.data.code
      })
    },
    /**
     * 获取产品分销二维码
     * @param function successFn 下载完成回调
     *
     */
    downloadFilePromotionCode: function (successFn) {
      let that = this
      getProductCode(that.id)
        .then((res) => {
          uni.downloadFile({
            url: that.setDomain(res.data.code),
            success: function (res) {
              that.$set(that, 'isDown', false)
              if (typeof successFn == 'function')
                successFn && successFn(res.tempFilePath)
              else that.$set(that, 'PromotionCode', res.tempFilePath)
            },
            fail: function () {
              that.$set(that, 'isDown', false)
              that.$set(that, 'PromotionCode', '')
            },
          })
        })
        .catch((err) => {
          that.$set(that, 'isDown', false)
          that.$set(that, 'PromotionCode', '')
        })
    },
    /**
     * 生成海报
     */
    goPoster: function () {
      let that = this
      uni.showLoading({
        title: '海报生成中',
        mask: true,
      })
      that.posters = false
      let arrImagesUrl = ''
      let arrImagesUrlTop = ''
      if (!that.PromotionCode) {
        uni.hideLoading()
        that.$util.Tips({
          title: that.errT,
        })
        return
      }
      setTimeout(() => {
        if (!that.imgTop) {
          uni.hideLoading()
          that.$util.Tips({
            title: '无法生成商品海报！',
          })
          return
        }
      }, 1000)
      uni.downloadFile({
        url: that.imgTop, //仅为示例，并非真实的资源
        success: (res) => {
          arrImagesUrlTop = res.tempFilePath
          let arrImages = [
            that.posterbackgd,
            arrImagesUrlTop,
            that.PromotionCode,
          ]
          let storeName = that.productInfo.storeName
          let price = that.productInfo.price
          setTimeout(() => {
            that.$util.PosterCanvas(
              arrImages,
              storeName,
              price,
              that.productInfo.otPrice,
              function (tempFilePath) {
                that.imagePath = tempFilePath
                that.canvasStatus = true
                uni.hideLoading()
              }
            )
          }, 500)
        },
      })
    },
   
 
    ShareInfo() {
      let data = this.productInfo
      let href = location.href
      if (this.$wechat.isWeixin()) {
        href =
          href.indexOf('?') === -1
            ? href + '?spread=' + this.uid
            : href + '&spread=' + this.uid

        let configAppMessage = {
          desc: data.storeInfo,
          title: data.storeName,
          link: href,
          imgUrl: data.image,
        }
        this.$wechat
          .wechatEvevt(
            [
              'updateAppMessageShareData',
              'updateTimelineShareData',
              'onMenuShareAppMessage',
              'onMenuShareTimeline',
            ],
            configAppMessage
          )
          .then((res) => {
            console.log(res)
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
  },
}
</script>

<style scoped lang="scss">
.product-con {
  height: 100%;
  .wrapper {
    margin-top: 0rpx;
    padding: 30rpx;
    .introduce {
      margin: 0;
      font-size: 32rpx;
      font-family: PingFangSC-Medium, PingFang SC;

      color: #333333;
      line-height: 45rpx;
    }
  }
}

.activityName {
  line-height: 44rpx;
}

.userEvaluation {
  i {
    display: inline-block;
  }
}

.bntVideo {
  width: auto !important;

  .buy {
    border-radius: 50rpx !important;
  }
}

.attribute {
  .line1 {
    width: 600rpx;
  }
}

.chat-btn {
  background-color: antiquewhite !important;
}

.activity_pin {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  background: linear-gradient(
    90deg,
    rgba(233, 51, 35, 1) 0%,
    rgba(250, 101, 20, 1) 100%
  );
  opacity: 1;
  border-radius: 22rpx;
  padding: 0 15rpx;
  // margin-left: 19rpx;
}

.activity_miao {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 15rpx;
  background: linear-gradient(
    90deg,
    rgba(250, 102, 24, 1) 0%,
    rgba(254, 161, 15, 1) 100%
  );
  opacity: 1;
  border-radius: 22rpx;
  margin-left: 19rpx;
}

.iconfonts {
  color: #fff !important;
  font-size: 28rpx;
}

.activity_title {
  font-size: 24rpx;
  color: #fff;
}

.activity_kan {
  width: auto;
  height: 44rpx;
  line-height: 44rpx;
  padding: 0 15rpx;
  background: linear-gradient(
    90deg,
    rgba(254, 159, 15, 1) 0%,
    rgba(254, 178, 15, 1) 100%
  );
  opacity: 1;
  border-radius: 22rpx;
  margin-left: 19rpx;
}

.mask {
  z-index: 300 !important;
}

.head-bar {
  background: #fff;
}

.generate-posters {
  width: 100%;
  height: 170rpx;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 388;
  transform: translate3d(0, 100%, 0);
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  border-top: 1rpx solid #eee;
}

.generate-posters.on {
  transform: translate3d(0, 0, 0);
}

.generate-posters .item {
  flex: 50%;
  text-align: center;
  font-size: 30rpx;
}

.generate-posters .item .iconfont {
  font-size: 80rpx;
  color: #5eae72;
}

.generate-posters .item .iconfont.icon-haibao {
  color: #5391f1;
}

.product-con .mask {
  z-index: 88;
}

.product-con .footer {
  padding: 0 20rpx 0 30rpx;
  position: fixed;
  bottom: 0;
  width: 100%;
  box-sizing: border-box;
  height: 100rpx;
  background-color: #fff;
  z-index: 277;
  border-top: 1rpx solid #f0f0f0;
  text-align: center;
}

.product-con .footer .item {
  font-size: 18rpx;
  color: #666;
  .back-list-text {
    font-size: 32rpx;

    color: #333333;
    line-height: 45rpx;
  }
}

.product-con .footer .item .iconfont {
  text-align: center;
  font-size: 40rpx;
}

.product-con .footer .item .iconfont.icon-shoucang1 {
  color: #f00;
}

.product-con .footer .item .iconfont.icon-gouwuche1 {
  font-size: 40rpx;
  position: relative;
}

.product-con .footer .item .iconfont.icon-gouwuche1 .num {
  color: #fff;
  position: absolute;
  font-size: 18rpx;
  padding: 2rpx 8rpx 3rpx;
  border-radius: 200rpx;
  top: -10rpx;
  right: -10rpx;
}

.product-con .footer .bnt {
  // width: 444rpx;
  height: 76rpx;
}

.product-con .footer .bnt .bnts {
  width: 690rpx;
  text-align: center;
  line-height: 76rpx;
  color: #fff;
  font-size: 28rpx;
}
 
.product-con .footer .bnt .buy {
  background: linear-gradient(90deg, #FF9846 0%, #FF5E0D 100%);
border-radius: 76rpx;
}

.product-con .store-info {
  margin-top: 20rpx;
  background-color: #fff;
}

.product-con .store-info .title {
  padding: 0 30rpx;
  font-size: 28rpx;
  color: #282828;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1px solid #f5f5f5;
}

.product-con .store-info .info {
  padding: 0 30rpx;
  height: 126rpx;
}

.product-con .store-info .info .picTxt {
  width: 615rpx;
}

.product-con .store-info .info .picTxt .pictrue {
  width: 76rpx;
  height: 76rpx;
}

.product-con .store-info .info .picTxt .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}

.product-con .store-info .info .picTxt .text {
  width: 522rpx;
}

.product-con .store-info .info .picTxt .text .name {
  font-size: 30rpx;
  color: #282828;
}

.product-con .store-info .info .picTxt .text .address {
  font-size: 24rpx;
  color: #666;
  margin-top: 3rpx;
}

.product-con .store-info .info .picTxt .text .address .iconfont {
  color: #707070;
  font-size: 18rpx;
  margin-left: 10rpx;
}

.product-con .store-info .info .picTxt .text .address .addressTxt {
  max-width: 480rpx;
}

.product-con .store-info .info .iconfont {
  font-size: 40rpx;
}

.product-con .superior {
  background-color: #fff;
  margin-top: 30rpx;
  padding: 0 24rpx 30rpx 24rpx;
}

.product-con .superior .title {
  height: 98rpx;
}

.product-con .superior .title image {
  width: 20rpx;
  height: 20rpx;
}

.product-con .superior .title .titleTxt {
  margin: 0 10rpx;
  font-size: 30rpx;
  color: #333333;
  // background-image: linear-gradient(to right, #f57a37 0%, #f21b07 100%);
  // -webkit-background-clip: text;
  // -webkit-text-fill-color: transparent;
}

.product-con .superior .slider-banner {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

.product-con .superior .slider-banner swiper {
  height: 100%;
  width: 100%;
}

.product-con .superior .slider-banner swiper-item {
  height: 100%;
}

.product-con .superior .slider-banner .list {
  width: 100%;
}

.product-con .superior .slider-banner .list .item {
  width: 198rpx;
  margin: 0 22rpx 30rpx 0;
  font-size: 26rpx;
}

.product-con .superior .slider-banner .list .item:nth-of-type(3n) {
  margin-right: 0;
}

.product-con .superior .slider-banner .list .item .pictrue {
  position: relative;
  width: 100%;
  height: 198rpx;
}

.product-con .superior .slider-banner .list .item .pictrue image {
  width: 100%;
  height: 100%;
  border-radius: 6rpx;
}

.product-con .superior .slider-banner .list .item .name {
  color: #282828;
  margin-top: 12rpx;
}

.product-con .superior .slider-banner .swiper-pagination-bullet {
  background-color: #999;
}

.product-con .superior .slider-banner .swiper-pagination-bullet-active {
  background-color: $theme-color;
}

button {
  padding: 0;
  margin: 0;
  line-height: normal;
  background-color: #fff;
}

button::after {
  border: 0;
}

action-sheet-item {
  padding: 0;
  height: 240rpx;
  align-items: center;
  display: flex;
}

.contact {
  font-size: 16px;
  width: 50%;
  background-color: #fff;
  padding: 8rpx 0;
  border-radius: 0;
  margin: 0;
  line-height: 2;
}

.contact::after {
  border: none;
}

.action-sheet {
  font-size: 17px;
  line-height: 1.8;
  width: 50%;
  position: absolute;
  top: 0;
  right: 0;
  padding: 25rpx 0;
}

.canvas {
  position: fixed;
  z-index: -5;
  opacity: 0;
}

.poster-pop {
  position: fixed;
  width: 450rpx;
  height: 714rpx;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: -432rpx;
  z-index: 399;
}

.poster-pop image {
  width: 100%;
  height: 100%;
  display: block;
}

.poster-pop .close {
  width: 46rpx;
  height: 75rpx;
  position: fixed;
  right: 0;
  top: -73rpx;
  display: block;
}

.poster-pop .save-poster {
  background-color: #df2d0a;
  font-size: ：22rpx;
  color: #fff;
  text-align: center;
  height: 76rpx;
  line-height: 76rpx;
  width: 100%;
}

.poster-pop .keep {
  color: #fff;
  text-align: center;
  font-size: 25rpx;
  margin-top: 10rpx;
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9;
}

.pro-wrapper .iconn {
  background-image: url('');
  width: 100rpx;
  height: 100rpx;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0 auto;
}

.pro-wrapper .iconn.iconn1 {
  background-image: url('');
}

.pictrue_log {
  width: 80upx;
  height: 40upx;
  border-radius: 10upx 0 12upx 0;
  line-height: 40upx;
  font-size: 24upx;
}

.pictrue_log_class {
  z-index: 3;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(rgba(246, 122, 56, 1)),
    to(rgba(241, 27, 9, 1))
  );
  background: linear-gradient(
    90deg,
    rgba(246, 122, 56, 1) 0%,
    rgba(241, 27, 9, 1) 100%
  );
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  color: #fff;
  text-align: center;
}

.navbar .header {
  height: 96rpx;
  font-size: 30rpx;
  color: #050505;
  background-color: #fff;
  /* #ifdef MP */
  padding-right: 95rpx;
  /* #endif */
}

.icon-xiangzuo {
  /* #ifdef H5 */
  top: 20rpx !important;
  /* #endif */
}

.navbar .header .item {
  position: relative;
  margin: 0 25rpx;
}

.navbar .header .item.on:before {
  position: absolute;
  width: 60rpx;
  height: 5rpx;
  background-repeat: no-repeat;
  content: '';
  background-image: linear-gradient(to right, #ff3366 0%, #ff6533 100%);
  bottom: -10rpx;
  left: 50%;
  margin-left: -28rpx;
}

.navbar {
  position: fixed;
  background-color: #fff;
  top: 0;
  left: 0;
  z-index: 99;
  width: 100%;
}

.navbar .navbarH {
  position: relative;
}

.navbar .navbarH .navbarCon {
  position: absolute;
  bottom: 0;
  height: 100rpx;
  width: 100%;
}

.icon-xiangzuo {
  color: #000;
  position: fixed;
  font-size: 36rpx;
  width: 100rpx;
  height: 56rpx;
  line-height: 54rpx;
  z-index: 1000;
  left: -5rpx;
}

.share-box {
  z-index: 1000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  image {
    width: 100%;
    height: 100%;
  }
}
</style>
